<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>跟新时的一个小问题</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<button @click="updatewang">修改李四信息</button>
			<ul>
				<li v-for="(p,index) in persons" :key="index">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: "#root",
				data: {
					persons:[{	id: '001', name: '李四', age: 12, sex: "男"},
							{	id: '002', name: '李二', age: 15, sex: "男"},
							{	id: '003', name: '王四', age: 11, sex: "女"},
							]
				},
				methods:{
					updatewang(){
						//this.persons[0].name="李思思";
						//this.persons[0].age=21
						//this.persons[0].sex="女"
						//上面是可以修改信息的，下面就修改不了信息。
						//注意：当点击更新按钮时，内存中persons的李四信息确实改了，但vue没有监测到本次变化。至于浏览器开发者工具中
						this.persons[0]={	id: '001', name: '李四', age: 12, sex: "男"}
					}
				}
			})
		</script>
	</body>
</html>